<template>
	<div class="flop" :style="{width:this.sty.w,height:this.sty.h}">
		<span>{{text.split('$')[0]}}</span>
		<!-- 最难的是位置补零 不接收反驳! -->
		<eachnum v-for='n in limit' :key="n" :v=" n-1<limit-val.length?0:val.split('')[n-1-limit+val.length]*1"></eachnum>
		<span>{{text.split('$')[1]}}</span>
	</div>
</template>
<script>
	import eachnum from './eachNum.vue'
	export default {
		components: {
			eachnum
		},		
		name: 'flop',
		data() {
			return {}
		},
		props: {
			limit: {
				type: Number,
				default: 5
			},
			val: {
				type: String,
				default: '0'
			},
			sty: {
				type: Object,
				default: {
					w: '100%',
					h: '100px'
				}
			},
			text: {
				type: String,
				default: ''
			}
		}
	}
</script>
<style lang='scss'>
	.flop {
		box-shadow: 0 10px 10px 10px rgba($color: #000000, $alpha: 0.3);
		border-radius: 15rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: skyblue;
		font-weight: 500;
	}
</style>
